import React, { useEffect, useRef, useState } from 'react'
import { Select, Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import * as echarts from 'echarts';
import * as axios from '../axiosAPI/zxr'

export default function Working() {
    let navigate = useNavigate()
    let gettime = () => {
        let time = new Date()
        let type = time.getHours()
        return type < 11 ? '早上好' : (type >= 13 ? '下午好' : '中午好')
    }
    let userid = sessionStorage.getItem('uid')
    let [urouter, setUrouter] = useState('')
    let checkrouter = async () => {
        let result = await axios.default.checkrole(userid)
        if (result.state) {
            setUrouter(result.urole)
        }
    }

    let routers = [
        {
            name: '学院管理',
            path: '/home/student',
            color: '#ffc71c33',
            img: '/学院.png'
        },
        {
            name: '新增试卷',
            path: '/home/examAdd/topic',
            color: '#2561ef33',
            img: '/试卷.png'
        },
        {
            name: '新增试题',
            path: '/home/topic',
            color: '#fa746b33',
            img: '/试题.png'
        },
        {
            name: '阅卷',
            path: '/home/shou',
            color: '#3dd4a733',
            img: '/阅卷.png'
        },
        {
            name: '成绩管理',
            path: '/home/show',
            color: '#e2c4fad1',
            img: '/成绩.png'
        }
    ]

    let [test_question, setTestquestion] = useState('')
    let [test_paper, setTestpaper] = useState('')
    let [college, setCollege] = useState([])
    let [classlist, setClasslist] = useState([])
    let [stage, setStage] = useState([])
    let [urole,setUrole] = useState('')
    let get_data = async () => {
        let result = await axios.default.getdata()
        console.log(result);
        if (result.state) {
            setTestquestion(result.question)
            setTestpaper(result.paper)
            setClasslist(result.clazz)
            setCollege(result.academy)
            setStage(result.stage)
            setUrole(result.role)
        }
    }

    const handleChange = (value) => {
        setCkcoll(value);
    }
    const handleChange1 = (value) => {
        setCkstage(value);
    }
    const handleChange2 = (value) => {
        setCkclass(value);
    }

    let [ckcoll, setCkcoll] = useState('66da61f654459bf8bb8f8523')
    let [ckclass, setCkclass] = useState('66d1bdcdf18b5f162cd52980')
    let [ckstage, setCkstage] = useState('66d01b681c9b3a7e402cc853')

    const [messageApi, contextHolder] = message.useMessage();
    let charts = useRef(null)
    let mycharts = null

    let changecharts = async () => {
        if (ckclass === '') {
            messageApi.open({
                type: 'error',
                content: '班级不能为空',
            });
        } else {
            let result = await axios.default.chartsdata(ckclass)
            if (result.state) {
                mycharts = echarts.init(charts.current)
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: result.namelist
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: result.testname
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: result.series1
                }
                mycharts.setOption(option)
            }
        }
    }

    useEffect(() => {
        get_data()
        changecharts()
        checkrouter()
        return () => {
            mycharts && mycharts.dispose()
        }
    }, [])
    return (
        <div className='working'>
            {contextHolder}
            <div className="time">
                <img src="/SayHello.png" alt="" />
                <p>
                    {gettime()}, {sessionStorage.getItem('uname')} ！
                </p>
            </div>
            <div className="content">
                <div className="left">
                    <div className="con">
                        <p className='title'>快捷导航</p>
                        <div className="list">
                            {routers.filter(el => urouter === '讲师' ? el.name !== '学院管理' : el).map(item => (
                                <div className="box1" key={item.name} onClick={() => {navigate(item.path)}}>
                                    <div className="bg" style={{ background: item.color }}>
                                        <img src={item.img} alt="" />
                                    </div>
                                    <p className='router'>{item.name}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="right">
                    <div className="top">
                        <p className='title'>待办事项</p>
                        <div className="bottom">
                            {urole==='超级管理员'?<><div className="loading" onClick={() => {navigate('/home/increased')}}>
                                <p className='font'>待审核题目</p>
                                <p className='number'>{test_question}</p>
                            </div>
                            <div className="loading" onClick={() => {navigate('/home/examList')}}>
                                <p className='font'>待审核试卷</p>
                                <p className='number'>{test_paper}</p>
                            </div></>:
                            <><div className="loading">
                                <p className='font'>待审核题目</p>
                                <p className='number'>{test_question}</p>
                            </div>
                            <div className="loading">
                                <p className='font'>待审核试卷</p>
                                <p className='number'>{test_paper}</p>
                            </div></>}
                        </div>
                    </div>
                    <div className="echarts">
                        <div className="condition">
                            <span className='font'>学院:</span>
                            <Select
                                style={{
                                    width: 120,
                                }}
                                onChange={handleChange}
                                value={ckcoll}
                                allowClear
                            >
                                {college.map(item => (
                                    <Select.Option key={item._id} value={item._id}>{item.name}</Select.Option>
                                ))}
                            </Select>
                            <span className='font'>阶段:</span>
                            <Select
                                style={{
                                    width: 120,
                                }}
                                onChange={handleChange1}
                                value={ckstage}
                                defaultValue='66d01b681c9b3a7e402cc853'
                                allowClear
                            >
                                {stage.filter(el => ckcoll !== '' ? el.academy === ckcoll : el).map(item => (
                                    <Select.Option key={item._id} value={item._id}>{item.name}</Select.Option>
                                ))}
                            </Select>
                            <span className='font'>班级:</span>
                            <Select
                                style={{
                                    width: 120,
                                }}
                                onChange={handleChange2}
                                value={ckclass}
                                allowClear
                                defaultValue='66d1bdcdf18b5f162cd52980'
                            >
                                {classlist.filter(el => ckstage !== '' ? el.stage === ckstage : el).map(item => (
                                    <Select.Option key={item._id} value={item._id}>{item.name}</Select.Option>
                                ))}
                            </Select>
                            <Button style={{ marginLeft: '8px' }} onClick={() => { changecharts() }}>搜索</Button>
                        </div>
                        <div className="picture" ref={charts}></div>
                    </div>
                </div>
            </div>

        </div>
    )
}